<!-- 预约记录列表
 // 权限分类：根据webUserInfo判断是否平台用户，区别普通大众和平台账户
 // 普通大众：只能查看自己的数据
 // 企业管理员：查看申请自己企业的数据
 // 园区工作人员：只展示 限定时间范围内（超出计划出园时间的数据：0未超出 1已超出 2不超过计划出园时间48小时） || 待审批 || 审批通过 || 审批不通过 状态下数据
 // 园区管理员：查看所有数据
 -->
<template>
	<view class="main-container">
		<!-- 顶部橙色标题栏 -->
		<view class="header-bar">
			<text class="header-title">师资团队</text>
		</view>

		<view class="course-list">
			<view class="course-item" v-for="(item, idx) in listData" :key="idx" @click="goTeacherDetail(item)">
				<image :src="getfullurl(item)" class="course-img" mode="aspectFill" />
				<view class="course-info">
					<text class="course-title">{{ item.name }}</text>
					<text class="course-desc">{{ item.teacherremark }}</text>
				</view>
			</view>
		</view>
		<view class="nomore">
			没有更多
		</view>

	</view>
</template>

<script>
	import {
		Platform,
		Storage_Key,
		ProjectStates,
		ProjectKeys,
		CarSetting
	} from '@/static/config.js';
	import request from '@/common/request.js';

	let that;
	export default {
		components: {
		},
		data() {
			return {
				// 数据列表
				listData: [],
				// 查询条件
				pageIndex: 1,
				pageSize: 10,
				doquerytime: Date.now(), // 每次执行初始查询时 将其置为当时时间，后续分页以该时间为基准进行查询。
				keyword: "",
				//加载更多
				refreshing: false,
				wxUserInfo: [], //微信用户
				webUserInfo: [], //web平台用户
				courseList: [
					{
						img: ('@/static/img/course1.png'),
						title: '健康管理师',
						desc: '健康管理师课程旨在培养具备健...'
					},
					{
						img: ('@/static/img/course1.png'),
						title: 'OH卡牌疗愈课程',
						desc: 'OH卡疗愈师课程教授潜意识投射...'
					},
					{
						img: ('@/static/img/course1.png'),
						title: '生命认知觉醒课程',
						desc: '生命觉醒课程通过探索生命起源...'
					},
					{
						img: ('@/static/img/course1.png'),
						title: '香道疗愈师课程',
						desc: '香道疗愈师课程教授传统香文化...'
					},
					{
						img: ('@/static/img/course1.png'),
						title: '灵气疗愈课程',
						desc: '灵气疗愈师课程教授能量传递与...'
					},
					{
						img: ('@/static/img/course1.png'),
						title: '曼陀罗疗愈课程',
						desc: '曼陀罗疗愈课程是以曼陀罗几何...'
					},
					{
						img: ('@/static/img/course1.png'),
						title: '家庭婚姻情感疗愈',
						desc: '家庭婚姻情感疗愈课程旨在帮...'
					}
				],
			}
		},
		onLoad(options) {
			if (options && options.data) {}
			this.listData = [];
			this.loadData();
		},
		//加载更多
		onReachBottom() {
			this.pageIndex++;
			this.loadData();
		},
		onPullDownRefresh() { // 下拉刷新
			this.refreshing = true;
			this.pageIndex = 1;
			this.doquerytime = Date.now();
			this.loadingType = "more";
			this.listData = [];
			this.loadData().then(rs => {
				uni.stopPullDownRefresh();
				this.refreshing = false;
			});
		},
		computed: {},
		methods: {
			getfullurl(item){
				return Platform.api_requestUrl + '/' + item.teacherpath;
			},
			// 设置监听
			setListening() {
				let _self = this;
				uni.$on('my-car-bookinglist-refresh', function(data) {
					if (data.key) {
						_self.clear();
					} else {}
				})
			},
			closeBookingtypeDialog() {
				this.$refs.bookingtypeDialog.close();
			},
			doAdd() {
				// 选择预约车辆类型
				this.$refs.bookingtypeDialog.open()
				// uni.navigateTo({
				// 	url: '/pages/booking/booking-car-add'
				// })
			},
			clear(e) {
				this.wxUserInfo = this.$storage.get(Storage_Key.user_info, true);
				this.webUserInfo = this.$storage.get(Storage_Key.web_user_info, true);
				this.pageIndex = 1;
				this.doquerytime = Date.now();
				this.loadingType = "more";
				this.listData = [];
				// this.keyword = "";
				// this.$nextTick(() => {
				// 	this.$refs.search.clear();
				// });
				//判断是否为游客，游客不能进行查询数据
				if (!!this.wxUserInfo || !!this.webUserInfo) {
					this.loadData();
				}
			},
			async loadData() {
				let _self = this;
				if (_self.loadingType == "nomore") return;
				let _list = [];
				let totalcount = -1;
				
				request({
					url: Platform.api_requestUrl + '/treatment/teacher/list',
					method: 'GET',
					data: {
						pageNum: this.pageIndex,
						pageSize: this.pageSize
					}
				}).then(res => {
					if (res?.code == 200 && !!res?.rows) {
						_list = res.rows;
						_self.listData = [..._self.listData, ..._list];
						totalcount = res.total;
					} 
					if (_self.listData.length >= totalcount)
						_self.loadingType = "nomore"
				}).catch(error => {
					console.error(error);
				});
				
			},
			// 关键字搜索
			search(e) {
				this.pageIndex = 1;
				this.doquerytime = Date.now();
				this.loadingType = "more";
				this.listData = [];
				this.keyword = e ? e.value : "";
				this.loadData();
			},
			input(e) {
				// 只处理清空
				if (!e.value) {
					this.search();
				}
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/booking/booking-car-view?item=' + encodeURIComponent(JSON
						.stringify(item))
				})
			},
			// 点击加载更多
			clickLoadMore(e) {
				this.pageIndex++;
				this.loadData();
			},
			goTeacherDetail(teacher) {
				uni.navigateTo({
					url: '/pages/record/teacher-detail?teacher=' + encodeURIComponent(JSON.stringify(teacher))
				});
			},
		},
		filters: {

		}
	}
</script>

<style lang='scss'>
	.nomore{
		text-align: center;
		padding: 10px;
		line-height: 36px;
	}
	.main-container {
		background: #f6f7fb;
		min-height: 100vh;
		position: relative;
		/* padding-bottom: 60px; */
	}
	.header-bar {
		background: #f26522;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.header-title {
		color: #fff;
		font-size: 22px;
		font-weight: bold;
	}
	.section-title {
		display: flex;
		align-items: center;
		padding: 18px 0 10px 18px;
		background: #fff;
	}
	.section-title .bar {
		width: 6px;
		height: 22px;
		background: #f26522;
		border-radius: 3px;
		margin-right: 10px;
	}
	.section-title .title-text {
		font-size: 18px;
		font-weight: bold;
		color: #222;
	}
	.course-list {
		background: #fff;
		padding: 0 0 10px 0;
	}
	.course-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx 24rpx;
		border-bottom: 1px solid #EEEEEE;
		background: #fff;
	}
	.course-img {
		width: 35%;
		height: 200rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
		background: #f5f5f5;
		object-fit: cover;
	}
	.course-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		// justify-content: space-between;
		height: 200rpx;
		padding: 20rpx 0;
	}
	.course-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
		line-height: 1.4;
	}
	.course-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.tabbar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 56px;
		background: #fff;
		display: flex;
		border-top: 1px solid #eee;
		z-index: 10;
	}
	.tabbar-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 4px;
	}
	.tabbar-icon {
		width: 24px;
		height: 24px;
		margin-bottom: 2px;
	}
	.tabbar-text {
		font-size: 12px;
		color: #888;
	}
	.tabbar-text.active {
		color: #f26522;
		font-weight: bold;
	}
</style>